<%--
  Created by IntelliJ IDEA.
  User: zzz
  Date: 2020/1/15
  Time: 19:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家居家具管理系统</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::dropzone -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/dropzone/dropzone.css" type="text/css">
    <!-- begin::dropzone -->

    <!-- begin::form wizard -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/form-wizard/jquery.steps.css" type="text/css">
    <!-- end::form wizard -->

    <!-- begin::lightbox -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/lightbox/magnific-popup.css" type="text/css">
    <!-- end::lightbox -->

    <!-- begin::tagsinput -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/tagsinput/bootstrap-tagsinput.css" type="text/css">
    <!-- end::tagsinput -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="${APP_PATH}/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="page-loader">
        <div class="spinner-border text-primary"></div>
        <span>加载中 ...</span>
    </div>
</div>
<!-- end::page loader -->

<!-- begin::navigation -->
<jsp:include page="/WEB-INF/jsps/Manager/common/navigation.jsp"/>
<!-- end::navigation -->

<!-- begin::top -->
<jsp:include page="/WEB-INF/jsps/Manager/common/top.jsp"/>
<!-- end::top -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>新增商品</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toManager">首页</a></li>
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toMyGoods">我的商品</a></li>
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toKindsType?kid=${requestScope.kinds.kid}">${requestScope.kinds.kname}</a></li>
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toFurniture?kid=${requestScope.kinds.kid}&ktid=${requestScope.kindsType.ktid}">${requestScope.kindsType.ktname}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">新增商品</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->

        <div class="card-group">
            <div class="card">
                <img src="${APP_PATH}/${requestScope.kindsType.ktface}" class="card-img-top" alt="...">
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h5 class="card-title">请填写商品的相关信息</h5>
                <div id="wizard">
                    <h3>基本信息</h3>
                    <section>
                        <p>请填写商品的基本信息：</p>
                        <div class="card">
                            <div class="card-body">
                        <form id="form1" class="needs-validation" novalidate>
                            <input type="hidden" name="ktid" value="${requestScope.kindsType.ktid}">
                            <div class="form-group wd-xs-300">
                                <label>商品名称：</label>
                                <input type="text" id="fname" name="fname" class="form-control"  required>
                                <div class="invalid-feedback">
                                </div>
                            </div><!-- form-group -->
                            <div class="form-group wd-xs-300">
                                <label>商品价格：</label>
                                <input type="text" id="fprice" name="fprice" class="form-control"  required>
                                <div class="invalid-feedback">
                                </div>
                            </div><!-- form-group -->
                            <div class="form-group wd-xs-300">
                                <label>商品标签：</label>
                                <input type="text" id="ftag" name="ftag" class="form-control tagsinput"  value="破损补寄,包邮,无理由退换货">
                                <div class="invalid-feedback">
                                </div>
                            </div><!-- form-group -->
                        </form>
                        </div>
                        </div>
                    </section>
                    <h3>图片上传</h3>
                    <section>
                        <p>请上传商品的相关图片：</p>
                        <div  class="card">
                            <div class="card-body">
                                <div style="margin-top: 15px;" class="custom-control custom-radio custom-control-inline">
                        <div class="form-group wd-xs-300">
                            <label class="form-control-label">请上传商品的展示图片：</label>
                            <button onclick="setFace(1)" type="button" class="btn btn-info "  data-toggle="modal" data-target="#face"><i class="fa fa-cloud-upload"></i> <span style="margin-left: 10px">点击此处上传</span></button>
                            <div class="invalid-feedback">
                            </div>
                            </div>
                        </div><!-- form-group -->
                                <div style="margin-top: 15px;" class="custom-control custom-radio custom-control-inline">
                            <div class="form-group wd-xs-300">
                                <label class="form-control-label">请上传商品的浏览图片：</label>
                                <button onclick="setView()" type="button" class="btn btn-info " data-toggle="modal" data-target="#view"><i class="fa fa-cloud-upload"></i> <span style="margin-left: 10px">点击此处上传</span></button>
                                <div class="invalid-feedback">
                                </div>
                                </div>
                            </div><!-- form-group -->
                                <div style="margin-top: 15px;" class="custom-control custom-radio custom-control-inline">
                            <div class="form-group wd-xs-300">
                                <label class="form-control-label">请上传描述商品详情的图片：</label>
                                <button onclick="setDetail()" type="button" class="btn btn-info " data-toggle="modal" data-target="#detail"><i class="fa fa-cloud-upload"></i> <span style="margin-left: 10px">点击此处上传</span></button>
                                <div class="invalid-feedback">
                                </div>
                                </div>
                            </div><!-- form-group -->
                            </div>
                        </div>
                    </section>
                    <h3>颜色分类</h3>
                    <section>
                        <p>请添加商品的颜色分类：</p>


                        <div class="card">
                            <div class="card-header">
                                <button onclick="myAdd()"  type="button" class="btn btn-primary btn-uppercase"><i class="ti-plus"></i></button>
                                <button onclick="myDelete()"  type="button" class="btn btn-primary btn-uppercase"><i class="ti-minus"></i></button>
                            </div>
                            <div class="card-body">
                                <div id="FKForms" class="accordion accordion-primary custom-accordion">


                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>

        <!-- begin::bottom -->
        <div class="card-group">
            <jsp:include page="/WEB-INF/jsps/Manager/common/bottom.jsp"/>
        </div>
        <!-- end::bottom -->

            </div>



    <div class="modal fade bd-example-modal-sm" id="face" tabindex="-1" role="dialog" aria-labelledby="faceTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="faceTitle">添加商品展示图</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <label class="col-form-label">请上传一张商品展示图:</label>
                    <form action="${APP_PATH}/furniture/ffaceUpload" class="dropzone"></form>
                </div>

                <div class="modal-footer">
                    <button  type="button" class="btn btn-primary" data-dismiss="modal">ojbk</button>
                </div>

            </div>
        </div>
    </div>


    <div class="modal fade bd-example-modal-lg" id="view" tabindex="-1" role="dialog" aria-labelledby="viewTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="viewTitle">添加商品浏览图</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <label class="col-form-label">请上传至少一张商品浏览图:</label>
                <form action="${APP_PATH}/furniture/viewUpload" class="dropzone"></form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">ojbk</button>
            </div>

        </div>
    </div>
</div>


    <div class="modal fade bd-example-modal-xl" id="detail" tabindex="-1" role="dialog" aria-labelledby="detailTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="detailTitle">添加商品详情图</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <label class="col-form-label">请上传至少一张商品详情图:</label>
                    <form action="${APP_PATH}/furniture/detailUpload" class="dropzone"></form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">ojbk</button>
                </div>

            </div>
        </div>
    </div>



</main>
<!-- end::main content -->


<!-- begin::global scripts -->
<script src="${APP_PATH}/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::dropzone -->
<script src="${APP_PATH}/assets/vendors/dropzone/dropzone.js"></script>
<!-- end::dropzone -->

<!-- begin::lightbox -->
<script src="${APP_PATH}/assets/vendors/lightbox/jquery.magnific-popup.min.js"></script>
<script src="${APP_PATH}/assets/js/examples/lightbox.js"></script>
<!-- end::lightbox -->

<!-- begin::form wizard -->
<script src="${APP_PATH}/assets/vendors/form-wizard/jquery.steps.min.js"></script>
<script src="${APP_PATH}/assets/js/examples/form-wizard.js"></script>
<!-- end::form wizard -->

<!-- begin::input mask -->
<script src="${APP_PATH}/assets/vendors/tagsinput/bootstrap-tagsinput.js"></script>
<script src="${APP_PATH}/assets/js/examples/tagsinput.js"></script>
<!-- end::input mask -->

<!-- begin::custom scripts -->
<script src="${APP_PATH}/assets/js/custom.js"></script>
<script src="${APP_PATH}/assets/js/app.js"></script>
<!-- end::custom scripts -->

</body>
</html>

<script>
    //表单验证
    $(function () {

        $(document).bind("contextmenu",function(e) {
            return false;
        });

        $("#fname").on("keyup blur",function () {
            validationNull("#fname");
        });

        $("#fprice").on("keyup",function () {
            var oEvent = window.event;
            var keyCode = oEvent.keyCode;
            if (keyCode!=17){
                validationNull("#fprice");
            }
            validationNumAndDecimal("#fprice",false,"k");
        });

        $("#fprice").on("blur", function () {
            validationNull("#fprice");
            validationNumAndDecimal("#fprice",false,"b");
        });
    });

    function validationRender() {
        $("input[name = 'fkname']").each(function () {
            var id = $(this).attr("id");
            $(this).on("keyup blur", function () {
                validationNull("#" + id);
                validationExist(id);
            });
        });

        $("input[name = 'fkprice'],input[name = 'cost']").each(function () {
            var id = $(this).attr("id");
            $(this).on("keyup", function () {
                var oEvent = window.event;
                var keyCode = oEvent.keyCode;
                if (keyCode != 17) {
                    validationNull("#" + id);
                }
                validationNumAndDecimal("#" + id,false,"k");
            });

            $(this).on("blur", function () {
                validationNull("#" + id);
                validationNumAndDecimal("#" + id,false,"b");
            });
        });

        $("input[name = 'stock']").each(function () {
            var id = $(this).attr("id");
            $(this).on("keyup blur", function () {
                var oEvent = window.event;
                var keyCode = oEvent.keyCode;
                if (keyCode != 17) {
                    validationNull("#" + id);
                }
                validationNumAndDecimal("#" + id,true,'k');
            });
        });

    }

    
    function validationNull(id) {
        var newName = $(id).val();
        if(newName ==''){
            $(id).next(".invalid-feedback").html("这是必填字段哦~");
            $(id).removeClass("is-valid");
            $(id).addClass("is-invalid");
            return true;
        }else{
            $(id).removeClass("is-invalid");
            $(id).addClass("is-valid");
            return false;
        }
    }

    function validationExist(id) {
        var isExist = false;
        var newFkname = $("#"+id).val();
        $("input[name = 'fkname']").each(function () {
            var this_id = $(this).attr("id");
            var fkname = $(this).val();
           if(id == this_id){
               return true;
           }else {
               if(newFkname == fkname){
                   $("#"+id).next(".invalid-feedback").html("这个名称您已经起过了哦~");
                   $("#"+id).removeClass("is-valid");
                   $("#"+id).addClass("is-invalid");
                   isExist = true;
               }
           }
        });
        return isExist;
    }

    function validationNumAndDecimal(id,isInteger,kORb) {
        var  incomplete = false;
        var regex = /^\d+(\.\d{0,2})?$/ ;
        var errorMessage = "只能输入整数和小数哦~（小数只能保留两位）";
        var content = $(id).val();
        $(id).css("ime-mode", "disabled"); //CSS设置输入法不可用;
        if(kORb=='b'){
            regex = /^\d+(\.\d{1,2})?$/ ;
            errorMessage = "您好像还没有写完哦~";
        }
        if(isInteger){
            regex = /^\d+$|^\d+[.]?\d+$/ ;
            errorMessage = "只能输入整数哦~";
        }
        if(!validationNull(id)){
            if(!regex.test(content)){
                $(id).next(".invalid-feedback").html(errorMessage);
                $(id).removeClass("is-valid");
                $(id).addClass("is-invalid");
                if(kORb == 'b'){
                    incomplete = true;
                }else {
                    $(id).val("");
                }
            }else{
                incomplete = false;
            }
        }

       return incomplete;
    }


</script>

<script>
    $(function () {
        $('.wizard li[aria-disabled = "false"] a').css("color","white");
        myAdd();
        fileMap.set(1,null);
        fileMap.set(2,null);
    });
    var count = 0;
    var fileNum = 0;
    var fileMap = new Map();
    var fileDeleteUrl = null;
    var multiple = true;
    var myDropzone = null;

    function myAdd() {
        count += 1;
        var FKForm = "";
            FKForm +='<div id="FKForm'+count+'" class="accordion-row ';
            if(count == 1){
                FKForm += 'open';
            }
            FKForm +='">';
            FKForm +='<a href="#" class="accordion-header">';
            FKForm +='<span>颜色种类 '+count+'</span>';
            FKForm +='<i class="accordion-status-icon close fa fa-circle"></i>';
            FKForm +='<i class="accordion-status-icon open fa fa-circle-o"></i>';
            FKForm +='</a>';
            FKForm +='<div class="accordion-body">';
            FKForm +='<form id="insertFK'+count+'">';
            FKForm +='<input type="hidden" name="count" value="'+count+'">';
            FKForm +='<div class="form-group wd-xs-300">';
            FKForm +='<label class="form-control-label">展示图片：</label>';
            FKForm +='<button onclick="setFace('+(count+1)+')" type="button" class="btn btn-info"  data-toggle="modal" data-target="#fkface'+count+'"><i class="fa fa-cloud-upload"></i> <span style="margin-left: 10px">点击此处上传</span></button>';
            FKForm +='<div class="invalid-feedback">';
            FKForm +='</div>';
            FKForm +='</div><!-- form-group -->';
            FKForm +='<div class="form-group wd-xs-300">';
            FKForm +='<label>名称：</label>';
            FKForm +='<input type="text" id="fkname'+count+'" name="fkname" class="form-control"  required>';
            FKForm +='<div class="invalid-feedback">';
            FKForm +='</div>';
            FKForm +='</div><!-- form-group -->';
            FKForm +='<div class="form-group wd-xs-300">';
            FKForm +='<label>价格：</label>';
            FKForm +='<input type="text" id="fkprice'+count+'" name="fkprice" class="form-control"  required>';
            FKForm +='<div class="invalid-feedback">';
            FKForm +='</div>';
            FKForm +='</div><!-- form-group -->';
            FKForm +='<div class="form-group wd-xs-300">';
            FKForm +='<label>成本：</label>';
            FKForm +='<input type="text" id="cost'+count+'" name="cost" class="form-control"  required>';
            FKForm +='<div class="invalid-feedback">';
            FKForm +='</div>';
            FKForm +='</div><!-- form-group -->';
            FKForm +='<div class="form-group wd-xs-300">';
            FKForm +='<label>库存：</label>';
            FKForm +='<input type="text" id="stock'+count+'" name="stock" class="form-control"  required>';
            FKForm +='<div class="invalid-feedback">';
            FKForm +='</div>';
            FKForm +='</div><!-- form-group -->';
            FKForm +='</form>';
            FKForm +='</div>';

            FKForm +='<div class="modal fade bd-example-modal-sm" id="fkface'+count+'" tabindex="-1" role="dialog" aria-labelledby="fkface'+count+'Title" aria-hidden="true">';
            FKForm +='<div class="modal-dialog modal-dialog-centered modal-sm" role="document">';
            FKForm +='<div class="modal-content">';
            FKForm +='<div class="modal-header">';
            FKForm +='<h5 class="modal-title" id="fkface'+count+'Title">添加颜色分类展示图</h5>';
            FKForm +='<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
            FKForm +='<span aria-hidden="true">&times;</span>';
            FKForm +='</button>';
            FKForm +='</div>';
            FKForm +='<div class="modal-body">';
            FKForm +='<label class="col-form-label">请上传一张颜色分类展示图:</label>';
            FKForm +='<form id="myDropzone'+count+'" action="${APP_PATH}/furniture/fkfaceUpload" class="dropzone">';
            FKForm +='<input type="hidden" name="count" value="'+count+'">';
            FKForm +='</form>';
            FKForm +='</div>';
            FKForm +='<div class="modal-footer">';
            FKForm +='<button  type="button" class="btn btn-primary" data-dismiss="modal">ojbk</button>';
            FKForm +='</div>';
            FKForm +='</div>';
            FKForm +='</div>';
            FKForm +='</div>';

            FKForm +='</div>';
            $("#FKForms").append(FKForm);
             new Dropzone("#myDropzone"+count, {});
             validationRender();
            fileMap.set((count+1),null);
    }

    function myDelete() {
        if(count>1){
            $("#FKForm"+count).remove();
            fileMap.delete(count+1);
            count -= 1;
        }
    }


    function setFace(i) {
        multiple = false;
        fileNum = i;
    }

    function setView() {
        multiple = true;
        fileDeleteUrl = "${APP_PATH}/furniture/fileDelete?flag=view";
    }

    function setDetail() {
        multiple = true;
        fileDeleteUrl = "${APP_PATH}/furniture/fileDelete?flag=detail";
    }

    //跳转到furniture界面
    function toFurniture(ktid) {
        window.location.href="${APP_PATH}/toFurniture?kid=${requestScope.kinds.kid}&ktid="+ktid;
    }


    //添加Furniture
   function myInsert() {
        for(var i = 1 ; i <= count ; i++){
            $.ajax({
                url: "${APP_PATH}/furniture/insertFurnitureKinds",
                data: $("#insertFK"+i).serialize(),
                method: "POST"
            });
        }

        $.ajax({
            url: "${APP_PATH}/furniture/insertFurniture",
            data: $("#form1").serialize(),
            method: "POST",
            success: function (result) {
                if (result.success) {
                    swal("该商品已成功上市！", {icon: "success"}).then((value) => {
                        window.location.href="${APP_PATH}/toFurniture?kid=${requestScope.kinds.kid}&ktid=${requestScope.kindsType.ktid}";
                });
                }else{
                    swal("添加失败！", {icon: "error"});
                }
            }

        });

   }


</script>


